(defpackage :layout-examples
  (:use :cl)
  (:export :define-layout-examples))

(in-package :layout-examples)


(defun define-artboard-example ()
  (spinneret:with-html
    (:div (:h3 "Artboard")
          (:div (:h4 "Artboard size 1")
                (dui:artboard "artboard phone-1 bg-primary" "320×568"))
          (:div (:h4 "Artboard horizontal size 1 (568×320)")
                (dui:artboard "artboard artboard-horizontal phone-1 bg-primary" "568×320"))
          )))


(defun define-divider-example ()
  (spinneret:with-html
    (:div (:h3 "Divider")
          (:div (:h4 "Divider")
                (:div :class "flex w-full flex-col border-opacity-50"
                      (:div :class "card bg-base-300 rounded-box grid h-20 place-items-center" "content")
                      (dui:divider "divider" "OR")
                      (:div :class "card bg-base-300 rounded-box grid h-20 place-items-center" "content")))
          (:div (:h4 "Divider horizontal")
                (:div :class "flex w-full"
                      (:div :class "card bg-base-300 rounded-box grid h-20 flex-grow place-items-center" "content")
                      (dui:divider "divider divider-horizontal" "OR")
                      (:div :class "card bg-base-300 rounded-box grid h-20 flex-grow place-items-center" "content")))
          (:div (:h4 "Divider with no text")
                (:div :class "flex w-full flex-col"
                      (:div :class "card bg-base-300 rounded-box grid h-20 place-items-center" "content")
                      (dui:divider-no-text "divider")
                      (:div :class "divider")
                      (:div :class "card bg-base-300 rounded-box grid h-20 place-items-center" "content")))
          )))

(defun define-drawer-example ()
  (spinneret:with-html
    #+:ignore
    ;; raw official html src
    (:div :class "max-w-[100vw] px-6 pb-16 xl:pr-2"
          (:div :class "flex flex-col-reverse justify-between gap-6 xl:flex-row"
                (:div :class "prose prose-sm md:prose-base w-full max-w-4xl flex-grow pt-10"
                      (:div :class "component-preview not-prose text-base-content my-6 lg:my-12"
                            (:div (:h3 "Drawer")
                                  (:div (:h4 "Drawer")
                                        (:div :class "component-preview text-base-content my-6 lg:my-12"
                                              (:div :class "grid"
                                                    (:div :class "bg-base-300 rounded-b-box rounded-se-box relative overflow-x-auto"
                                                          (:div :class "preview border-base-300 bg-base-100 rounded-b-box rounded-se-box flex min-h-[6rem] min-w-[18rem] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-x-hidden bg-cover bg-top p-4 [border-width:var(--tab-border)]" :style "" ;; border
                                                                (dui:drawer "drawer h-56 rounded overflow-hidden"
                                                                            (dui:input "drawer-toggle" "checkbox" "" :id "my-drawer")
                                                                            (:div :class "flex flex-col items-center justify-center drawer-content"
                                                                                  (:label :for "my-drawer" :class "btn btn-primary drawer-button" "Open drawer"))
                                                                            (:div :class "drawer-side h-full absolute"
                                                                                  (:label :for "my-drawer" :aria-label "close sidebar" :class "drawer-overlay")
                                                                                  (:ul :class "menu p-4 w-60 md:w-80 min-h-full bg-base-200 text-base-content"
                                                                                       (:li (:a "Sidebar Item 1"))
                                                                                       (:li (:a "Sidebar Item 2")))))))))

                                        ))))))
    (:div (:h3 "Drawer")
          (:div (:h4 "Drawer")
                (dui:drawer "drawer h-56 rounded overflow-hidden"
                            (dui:input "drawer-toggle" "checkbox" "" :id "my-drawer0")
                            (:div :class "flex flex-col items-center justify-center drawer-content" ; 按钮位置居中
                                  (:label :for "my-drawer0" :class "btn btn-primary drawer-button" "Open drawer"))
                            (:div :class "drawer-side h-full absolute" ; absolute控制抽屉在例子框内
                                  (:label :for "my-drawer0" :aria-label "close sidebar" :class "drawer-overlay")
                                  (:ul :class "menu p-4 w-60 md:w-80 min-h-full bg-base-200 text-base-content"
                                       (:li (:a "Sidebar Item 1"))
                                       (:li (:a "Sidebar Item 2"))))))
          (:div (:h4 "Drawer default(Use only in single column pages)")
                (dui:drawer "drawer"
                            (dui:input "drawer-toggle" "checkbox" "" :id "my-drawer")
                            (:div :class "drawer-content" ;;
                                  (:label :for "my-drawer" :class "btn btn-primary drawer-button" "Open drawer"))
                            (:div :class "drawer-side"
                                  (:label :for "my-drawer" :aria-label "close sidebar" :class "drawer-overlay")
                                  (:ul :class "menu bg-base-200 text-base-content min-h-full w-80 p-4"
                                       (:li (:a "Sidebar Item 1"))
                                       (:li (:a "Sidebar Item 2"))))))
          (:div (:h4 "Navbar menu for desktop + sidebar drawer for mobile")
                (dui:drawer "drawer"
                            (dui:input "drawer-toggle" "checkbox" "" :id "my-drawer-3")
                            (:div :class "drawer-content flex flex-col"
                                  ;; Navbar
                                  (dui:navbar "navbar bg-base-300 w-full"
                                              ((:div :class "flex-none lg:hidden" (svg-icons:home))
                                               (:div :class "mx-2 flex-1 px-2" "Navbar Title")
                                               (:div :class "hidden flex-none lg:block"
                                                     (:ul :class "menu menu-horizontal"
                                                          (:li (:a "Navbar Item 1"))
                                                          (:li (:a "Navbar Item 2"))))))
                                  (:div "Contents"))
                            (:div :class "drawer-side"
                                  (:label :for "my-drawer-3" :aria-label "close sidebar" :class "drawer-overlay")
                                  (:ul :class "menu bg-base-200 min-h-full w-80 p-4"
                                       (:li (:a "Sidebar Item 1"))
                                       (:li (:a "Sidebar Item 2"))))))
          )))

(defun define-footer-example ()
  (spinneret:with-html
    (:div (:h3 "Footer")
          (:div (:h4 "Footer")
                (dui:footer "footer bg-neutral text-neutral-content p-10"
                            ((:nav
                              (:h6 :class "footer-title" "Services")
                              (:a :class "link link-hover" "Branding")
                              (:a :class "link link-hover" "Design")
                              (:a :class "link link-hover" "Marketing")
                              (:a :class "link link-hover" "Advertisement"))
                             (:nav
                              (:h6 :class "footer-title" "Company")
                              (:a :class "link link-hover" "About us")
                              (:a :class "link link-hover" "Contact")
                              (:a :class "link link-hover" "Jobs")
                              (:a :class "link link-hover" "Press kit"))
                             (:nav
                              (:h6 :class "footer-title" "Legal")
                              (:a :class "link link-hover" "Terms of use")
                              (:a :class "link link-hover" "Privacy policy")
                              (:a :class "link link-hover" "Cookie policy"))))
                ))))

(defun define-hero-example ()
  (spinneret:with-html
    (:div (:h3 "Hero")
          (:div (:h4 "Centered hero")
                (dui:hero "hero bg-base-200 min-h-screen"
                          (:div :class "hero-content text-center"
                                (:div :class "max-w-md flex flex-col"
                                      (:h1 :class "text-5xl font-bold" "Hello there")
                                      (:p :class "py-6"
                                          "Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.")
                                      (:div (dui:button "btn btn-primary" "Get Started"))
                                      ))))
          (:div (:h4 "Hero with overlay image")
                (dui:hero "hero min-h-screen"
                          (:div :class "hero-content text-center"
                                (:div (:div :class "hero-overlay bg-opacity-60")
                                      (:div :class "hero-content text-neutral-content text-center"
                                            (:div :class "max-w-md"
                                                  (:h1 :class "mb-5 text-5xl font-bold" "Hello there"
                                                       (:p :class "py-6"
                                                           "Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.")
                                                       (:div (dui:button "btn btn-primary" "Get Started")))))))
                          :style "background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"))
          )))

(defun define-indicator-example ()
  (spinneret:with-html
    (:div (:h3 "Indicator")
          (:div (:h4 "Empty badge as indicator")
                (dui:indicator "indicator"
                               (:span :class "indicator-item badge badge-secondary")
                               (:div :class "bg-base-300 grid h-32 w-32 place-items-center" "content")))
          (:div (:h4 "Badge as indicator")
                (dui:indicator "indicator"
                               (:span :class "indicator-item badge badge-primary" "NEW")
                               (:div :class "bg-base-300 grid h-32 w-32 place-items-center" "content")))
          (:div (:h4 "for button")
                (dui:indicator "indicator"
                               (:span :class "indicator-item badge badge-secondary" "99+")
                               (dui:button "btn" "Inbox")))
          (:div (:h4 "for tab")
                (:div :class "tabs tabs-lifted"
                      (:a :class "tab" "Messages")
                      (:a :class "indicator tab tab-active"
                          "Notifications"
                          (:span :class "indicator-item badge" "8"))
                      (:a :class "tab" "Requests")))
          (:div (:h4 "for avatar")
                (dui:indicator "avatar indicator not-prose" ; 没有not-pose图片只会显示一半
                               (:span :class "indicator-item badge badge-secondary" "typing…")
                               (:div :class "h-20 w-20 rounded-lg"
                                     (:img :alt "Tailwind CSS examples"
                                           :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"))))
          )))

(defun define-joint-example ()
  (spinneret:with-html
    (:div (:h3 "Joint")
          (:div (:h4 "Join")
                (dui:joint "joint"
                           ((dui:button "btn join-item" "Button")
                            (dui:button "btn join-item" "Button")
                            (dui:button "btn join-item" "Button"))))
          (:div (:h4 "Group items vertically")
                (dui:joint "join join-vertical"
                           ((dui:button "btn join-item" "Button")
                            (dui:button "btn join-item" "Button")
                            (dui:button "btn join-item" "Button"))))
          (:div (:h4 "Responsive: it's vertical on small screen and horizontal on large screen")
                (dui:joint "join join-vertical lg:join-horizontal"
                           ((dui:button "btn join-item" "Button")
                            (dui:button "btn join-item" "Button")
                            (dui:button "btn join-item" "Button"))))
          (:div (:h4 "With extra elements in the group")
                (dui:joint "join"
                           ((:div (:div (dui:input "input input-bordered join-item" "text" :placeholder "Search")))
                            (dui:select "select select-bordered join-item"
                              ((dui:select-option "Filter" t t)
                               (dui:select-option "Sci-fi")
                               (dui:select-option "Drama")
                               (dui:select-option "Action")))
                            (dui:indicator "indicator"
                                           (:span :class "indicator-item badge badge-secondary" "new")
                                           (dui:button "btn join-item" "Search")))))
          (:div (:h4 "Custom border radius")
                (dui:joint "join"
                           ((dui:input "input input-bordered join-item" "Email")
                            (dui:button "btn join-item rounded-r-full" "Subscribe"))))
          (:div (:h4 "Custom border radius")
                (dui:joint "join"
                           ((dui:input "input input-bordered join-item" "test" "Email")
                            (dui:button "btn join-item rounded-r-full" "Subscribe"))))
          (:div (:h4 "Join radio inputs with btn style")
                (dui:joint "join"
                           ((dui:input "join-item btn" "radio" "" :name "options" :aria-label "Radio 1")
                            (dui:input "join-item btn" "radio" "" :name "options" :aria-label "Radio 2")
                            (dui:input "join-item btn" "radio" "" :name "options" :aria-label "Radio 3"))))
          )))

(defun define-mask-example ()
  (spinneret:with-html
    (:div (:h3 "Mask")
          (:div (:h4 "Squircle")
                (dui:mask "mask mask-squircle"
                          "https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp"))
          (:div (:h4 "Heart")
                (dui:mask "mask mask-heart"
                          "https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp"))
          (:div (:h4 "Hexagon")
                (dui:mask "mask mask-hexagon"
                          "https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp"))
          (:div (:h4 "Hexagon-2")
                (dui:mask "mask mask-hexagon-2"
                          "https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp"))
          )))

(defun define-stack-example ()
  (spinneret:with-html
    (:div (:h3 "Stack")
          (:div (:h4 "3 divs without stack")
                (dui:stack ""
                           ((:div :class "bg-primary text-primary-content grid h-20 w-32 place-content-center rounded" "1")
                            (:div :class "bg-accent text-accent-content grid h-20 w-32 place-content-center rounded" "2")
                            (:div :class "bg-secondary text-secondary-content grid h-20 w-32 place-content-center rounded" "3"))))
          (:div (:h4 "3 divs with stack")
                (dui:stack "stack"
                           ((:div :class "bg-primary text-primary-content grid h-20 w-32 place-content-center rounded" "1")
                            (:div :class "bg-accent text-accent-content grid h-20 w-32 place-content-center rounded" "2")
                            (:div :class "bg-secondary text-secondary-content grid h-20 w-32 place-content-center rounded" "3"))))
          (:div (:h4 "stacked images")
                (dui:stack "stack"
                           ((:img :class "rounded" :src "https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp")
                            (:img :class "rounded" :src "https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp")
                            (:img :class "rounded" :src "https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"))))
          (:div (:h4 "stacked cards")
                (dui:stack "stack"
                           ((:div :class "border-base-content card bg-base-100 w-36 border text-center" (:div :class "card-body" "A"))
                            (:div :class "border-base-content card bg-base-100 w-36 border text-center" (:div :class "card-body" "B"))
                            (:div :class "border-base-content card bg-base-100 w-36 border text-center" (:div :class "card-body" "C")))))
          (:div (:h4 "stacked cards with shadow")
                (dui:stack "stack"
                           ((:div :class "card bg-base-200 w-36 text-center shadow-md" (:div :class "card-body" "A"))
                            (:div :class "card bg-base-200 w-36 text-center shadow"    (:div :class "card-body" "B"))
                            (:div :class "card bg-base-200 w-36 text-center shadow-sm" (:div :class "card-body" "C")))))
          (:div (:h4 " stacked cards")
                (dui:stack "stack"
                           ((:div :class "card bg-primary text-primary-content shadow-md"
                                  (:div :class "card-body"
                                        (:h2 :class "card-title" "Notification 1")
                                        (:p "You have 3 unread messages. Tap here to see.")))
                            (:div :class "card bg-primary text-primary-content shadow"
                                  (:div :class "card-body"
                                        (:h2 :class "card-title" "Notification 2")
                                        (:p "You have 3 unread messages. Tap here to see.")))
                            (:div :class "card bg-primary text-primary-content shadow-sm"
                                  (:div :class "card-body"
                                        (:h2 :class "card-title" "Notification 3")
                                        (:p "You have 3 unread messages. Tap here to see."))))))
          )))


(defun define-layout-examples ()
  (spinneret:with-html
    (:div
     (define-artboard-example)
     ;; ...
     )))


(defun compile-artboard-example ()
  (spinneret:with-html-string
    (define-artboard-example)))

(defun compile-divider-example ()
  (spinneret:with-html-string
    (define-divider-example)))

(defun compile-drawer-example ()
  (spinneret:with-html-string
    (define-drawer-example)))

(defun compile-footer-example ()
  (spinneret:with-html-string
    (define-footer-example)))

(defun compile-hero-example ()
  (spinneret:with-html-string
    (define-hero-example)))

(defun compile-indicator-example ()
  (spinneret:with-html-string
    (define-indicator-example)))

(defun compile-joint-example ()
  (spinneret:with-html-string
    (define-joint-example)))

(defun compile-mask-example ()
  (spinneret:with-html-string
    (define-mask-example)))

(defun compile-stack-example ()
  (spinneret:with-html-string
    (define-stack-example)))


(easy-routes:defroute layout-artboard ("/layout/artboard" :method :get) ()
  (compile-artboard-example))

(easy-routes:defroute layout-divider ("/layout/divider" :method :get) ()
  (compile-divider-example))

(easy-routes:defroute layout-drawer ("/layout/drawer" :method :get) ()
  (compile-drawer-example))

(easy-routes:defroute layout-footer ("/layout/footer" :method :get) ()
  (compile-footer-example))

(easy-routes:defroute layout-hero ("/layout/hero" :method :get) ()
  (compile-hero-example))

(easy-routes:defroute layout-indicator ("/layout/indicator" :method :get) ()
  (compile-indicator-example))

(easy-routes:defroute layout-joint ("/layout/joint" :method :get) ()
  (compile-joint-example))

(easy-routes:defroute layout-mask ("/layout/mask" :method :get) ()
  (compile-mask-example))

(easy-routes:defroute layout-stack ("/layout/stack" :method :get) ()
  (compile-stack-example))
